<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sha Zeng</title>
    <style>
        /* transform: translate( 50px 50px);位移
        /* transform: scale(0.5 2);
        /* transform: rotate(45deg);顺时针旋转45度，-45为逆时针旋转 */
        /* } */
        /* div:hover {
            transform: translate( 50px 50px);
        } */
        
        body {
            background-image: url(个人网站背景图.jpg);
            background-size: 100%;
            height: 1000px;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
        }
        
        .z {
            width: 100px;
            height: 100px;
            background-color: rgb(16, 17, 17);
            margin: 100px auto;
            animation: move 35s infinite reverse;
            border-radius: 50px;
            position: absolute;
            position: fixed;
            left: 200px;
            bottom: 200px;
            z-index: -10;
            box-shadow: 5px 5px 5px rgb(190, 186, 186);
        }
        
        @keyframes art {
            0% {
                transform: translate(0, 0);
            }
            30% {
                transform: translate(-50px, 0px);
            }
            60% {
                transform: translate(50px, 0px);
            }
        }
        
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            10% {
                transform: translate(25px, 30px);
                background-color: rgb(39, 38, 38);
            }
            20% {
                transform: translate(100px, -500px);
            }
            30% {
                transform: translate(-200px, 60px);
            }
            40% {
                transform: translate(0px, -700px);
            }
            50% {
                transform: translate(35px, 800px);
                background-color: rgb(97, 90, 90);
            }
            70% {
                transform: translate(100px, 300px);
            }
            80% {
                transform: translate(50px, 10px);
            }
            100% {
                transform: translate(0px, 100px) rotate(45deg) scale(1.5);
            }
        }
        
        .d {
            width: 100px;
            height: 100px;
            background-color: rgb(16, 17, 17);
            margin: 500px auto;
            animation: move 24s infinite reverse;
            border-radius: 50px;
            position: absolute;
            position: fixed;
            left: 500px;
            bottom: 300px;
            z-index: -10;
            box-shadow: 5px 5px 5px rgb(190, 186, 186);
        }
        
        .lit {
            position: absolute;
            left: 1000px;
            top: 520px;
            padding-bottom: 9px;
            animation: art 10s infinite reverse;
        }
        
        .f {
            width: 100px;
            height: 100px;
            background-color: rgb(16, 17, 17);
            margin: 100px auto;
            animation: move 40s infinite reverse;
            border-radius: 50px;
            position: absolute;
            position: fixed;
            left: 950px;
            bottom: 300px;
            z-index: -10;
            box-shadow: 5px 5px 5px rgb(190, 186, 186);
        }
        
        .one {
            margin: 60px 60px 0px 60px;
            position: relative;
            height: 800px;
        }
        
        .R {
            position: absolute;
            right: 80px;
            bottom: 40px;
            display: inline-block;
            text-align: right;
            position: fixed;
            transition: all 0.5s;
        }
        
        .R:hover {
            transform: scale(1.5, 1.5);
        }
        
        .W {
            position: absolute;
            right: 80px;
            top: 40px;
            display: inline-block;
            text-align: right;
            position: fixed;
            transition: all 0.5s;
        }
        
        .W:hover {
            transform: scale(1.5, 1.5);
        }
        
        .E {
            position: absolute;
            bottom: 40px;
            left: 80px;
            display: inline-block;
            text-align: left;
            position: fixed;
            transition: all 0.5s;
        }
        
        .E:hover {
            transform: scale(1.5, 1.5);
        }
        
        .T {
            position: absolute;
            display: inline-block;
            text-align: left;
            position: fixed;
        }
        
        .Q {
            position: absolute;
            top: 90px;
            position: fixed;
            transition: all 0.5s;
        }
        
        .Q:hover {
            transform: scale(1.5, 1.5);
        }
        
        .A {
            text-align: center;
            padding-top: 170px;
            top: 400px;
            right: 100px;
            transition: all 0.5s;
        }
        
        .A:hover {
            transform: scale(1.5, 1.5);
        }
        
        .J {
            background-color: black;
            width: 260px;
            height: 10px;
            border-radius: 5px;
            text-align: center;
            position: absolute;
            left: 560px;
            bottom: 510px;
        }
        
        .B {
            margin: 0 auto;
            background-color: rgba(171, 191, 197);
            width: 250px;
            height: 35px;
            border-radius: 60px;
            padding-top: 17.5px;
            transition: all 0.5s;
        }
        
        .B:hover {
            transform: scale(1.5, 1.5);
        }
        
        .two {
            height: 800px;
            width: 1450px;
            margin-left: 25px;
            text-align: center;
            border-style: solid;
            padding-top: 80px;
            position: relative;
        }
        
        .three {
            height: 800px;
            width: 1450px;
            margin-left: 25px;
            text-align: center;
            position: relative;
            margin-top: 35px;
            padding-top: 80px;
            border-style: solid;
        }
        
        .N {
            text-align: center;
            padding-top: 170px;
            top: 400px;
            right: 100px;
        }
        
        .U {
            text-align: center;
            display: inline-block;
            vertical-align: top;
            margin-top: 35px;
        }
        /* .V {
            width: 150px;
            height: 24px;
            text-align: center;
            border-style: solid;
            border-radius: 12px;
            display: inline-block;
            margin-right: 90px;
        } */
        
        .C {
            width: 300px;
            height: 60px;
            text-align: center;
            border-style: solid;
            border-radius: 30px;
            display: inline-block;
            margin-right: 90px;
            position: relative;
            line-height: 30px;
            left: 40px;
            top: 300px;
        }
        
        .X {
            width: 300px;
            height: 60px;
            text-align: center;
            border-style: solid;
            border-radius: 30px;
            position: relative;
            display: inline-block;
            margin-right: 90px;
            margin-top: 34px;
            line-height: 30px;
            top: 300px;
            left: 25px;
        }
        
        .Z {
            width: 300px;
            height: 60px;
            text-align: center;
            border-style: solid;
            border-radius: 30px;
            display: inline-block;
            margin-right: 90px;
            position: relative;
            line-height: 30px;
            left: 30px;
            top: 300px;
        }
        
        .chahua {
            display: none;
            position: absolute;
            left: -280px;
            top: -280px;
            min-width: 100px;
            width: 1000px;
        }
        
        .qa {
            position: absolute;
            left: 130px;
            bottom: 90px;
            z-index: -5;
            border-style: solid;
        }
        
        .qw {
            position: absolute;
            left: 510px;
            bottom: 90px;
            z-index: -5;
            border-style: solid;
        }
        
        .qs {
            position: absolute;
            left: 920px;
            bottom: 90px;
            z-index: -5;
            border-style: solid;
        }
        
        .Z:hover .chahua {
            display: block;
        }
        
        .huache {
            display: none;
            position: absolute;
            left: -280px;
            top: -300px;
            min-width: 100px;
            width: 1000px;
        }
        
        .X:hover .huache {
            display: block;
        }
        
        .shouhui {
            display: none;
            position: absolute;
            left: -400px;
            top: -280px;
            min-width: 100px;
            width: 1000px;
        }
        
        .C:hover .shouhui {
            display: block;
        }
        
        .I {
            position: absolute;
            left: 40px;
            top: 200px;
            width: 400px;
            height: 300px;
        }
        
        .q {
            position: absolute;
            left: 200px;
        }
        
        .M {
            width: 780px;
            text-align: left;
            position: absolute;
            left: 500px;
            top: 165px;
        }
        
        .K {
            background-color: rgb(112, 109, 105);
            text-align: left;
            height: 100px;
            padding-left: 500px;
            padding-top: 50px;
        }
        
        .e {
            position: absolute;
            left: 300px;
            display: inline-block;
        }
        
        .w {
            position: absolute;
            left: 880px;
            display: inline-block;
        }
        /* .shougong {
            position: absolute;
            left: 1140px;
            bottom: 200px;
            z-index: -5;
        } */
    </style>
</head>

<body>

    <div class="one">
        <div class="z"></div>
        <div class="d"></div>
        <div class="f"></div>
        <div class="T"><a id="1" style="font-family: 方正粗黑宋简体;font-size: 30px;">S H A</a></div>
        <div class="Q"><a href="#1" style="color: black;">S T Y L I S T</a></div>
        <div class="W"><a href="#2" style="color: black;">W O R K_</a></div>
        <div class="E"><a href="#3" style="color: black;">A B O U T_</a></div>
        <div class="R"><a href="#4" style="color: black;">L E T'S TALK_</a></div>
        <div class="A">
            <a style="font-family: 华文琥珀;font-size: 120px">S H A</a>
            <div class="J"> </div>
            <p>This is the home of an art student</p>
            <div class="B">
                <a href="#7"> Let's go down and see</a>
            </div>

        </div>

    </div>
    <div class="two">
        <a id="7"></a>
        <div class="Y">
            <a id="2" style=" font-family: 华文琥珀;font-size: 50px ">W O R K / 作 品</a>
        </div>
        <div class="U">

            <div class="Z">
                <h2> illustration design</h2>


                <div class="chahua">
                    <img src="插画1.jpg" alt="" width="360px" height="520px">
                    <img src="插画2.jpg" alt="" width="360px" height="520px">

                </div>


            </div>
            <div class="qa">
                <img src="插画.jpg" alt="" height="550px">
            </div>

        </div>

        <div class="X">
            <h2> album of painting</h2>

            <div class="huache">
                <img src="画册2.jpg" alt="" height="250px">
                <img src="画册5.jpg" alt="" height="250px">
                <img src="画册6.jpg" alt="" height="250px">
                <img src="画册7.jpg" alt="" height="250px">
                <img src="画册8.jpg" alt="" height="250px">
                <img src="画册9.jpg" alt="" height="250px">
            </div>
        </div>
        <div class="qw">
            <img src="海报.png" alt="" height="550px">
        </div>
        <div class="C">
            <h2> freehand sketching</h2>
            <div class="shouhui">

                <img src="手绘3.png" alt="" height="300px">
                <img src="手绘4.jpg" alt="" height="300px">
                <img src="手绘5.jpg" alt="" height="300px">
                <img src="手绘6.jpg" alt="" height="300px">
                <img src="手绘7.jpg" alt="" height="300px">
            </div>
        </div>
        <div class="qs">
            <img src="素描.jpg" alt="" height="550px">

        </div>
        <!-- <div class="V">
            handmade work

        </div>
        <div class="shougong">
            <img src="手工作品1.jpg" alt="" height="300px">
        </div> -->
    </div>


    </div>
    <div class="three">
        <a id="3" style=" font-family: 华文琥珀;font-size: 50px">A B O U T</a>
        <div class="q">
            <div class="I"><img src="个人照片.jpg" alt="个人相册" width="400px" height="300px">
            </div>
            <div class="M">
                <p style="font-family: 方正粗黑宋简体; font-size: 20px ;color:rgb(17, 16, 16);"> <strong style="font-size: 40px;">name: </strong> Sha Zeng</p>
                <p style="font-family: 方正粗黑宋简体; font-size: 20px; color: rgb(17, 16, 16);"> <strong style="font-size: 40px;">character: </strong> A quiet child in motion is like a hare</p>
                <p style="font-family: 方正粗黑宋简体; font-size: 20px; color: rgb(17, 16, 16);"> <strong style="font-size: 40px;">hobby: </strong> Reading, music, games, mountain climbing, learning</p>
                <p style="font-family: 方正粗黑宋简体; font-size: 20px; color: rgb(17, 16, 16);"> <strong style="font-size: 40px;">motto: </strong> Everyone has something to offer. You're good, too.</p>
                <p style="font-family: 方正粗黑宋简体; font-size: 20px; color: rgb(17, 16, 16);"> <strong style="font-size: 40px;">use: </strong> AI,PS,Visual Stydio Code</p>
                </a>

            </div>
            <div class="lit">
                <img src="小图片1.jpg" alt="" width="220px">
            </div>
        </div>
    </div>
    <div class="four">
        <div class="N">
            <a id="4" style="font-family: 华文琥珀;font-size: 90px">L E T'S TALK</a>
            <div class="K">
                <div class="w">
                    <p style="font-family: 方正粗黑宋简体; font-size: 20px ;color:white;"> QQ: 2780292912</p>
                    <p style="font-family: 方正粗黑宋简体; font-size: 20px ;color:white;">WeChat: zengsha001013</p>
                </div>
                <div class="e">
                    <p style="font-family: 方正粗黑宋简体; font-size: 20px ;color:white;">Phone: 17883998208</p>
                    <p style="font-family: 方正粗黑宋简体; font-size: 20px ;color:white;">Mailbox: 2780292912@qq.com</p>
                </div>
            </div>
        </div>

    </div>

</body>

</html>